<template>
  <div class="UserModify common-container">
    <div class="common-top">
      <span class="left">
        <span class="go-back" @click.stop="$router.go(-1)">返回</span>
      </span>
      <!-- <el-button type="primary" @click="save">保存</el-button> -->
    </div>
    <div class="common-bot">
      <div class="modify-bot">
        <el-tabs v-model="activeName">
          <el-tab-pane label="基本信息" class="baseInfoBox" name="baseInfo">
            <!--<el-form ref="form" :inline="true" :model="baseInfoForm" label-width="auto">-->
            <el-form ref="form" :inline="true" :model="baseInfoForm">
              <el-form-item label="头像" style="width: 30%">
                <el-avatar :size="'large'" :src="baseInfoForm.avatar"></el-avatar>
              </el-form-item>
              <el-form-item label="名称" style="width: 30%">
                <span>{{ baseInfoForm.name }}</span>
              </el-form-item>
              <el-form-item label="性别" style="width: 30%">
                <span>{{ gender[baseInfoForm.gender] }}</span>
              </el-form-item>
              <el-form-item label="appId" style="width: 30%">
                <span>{{ baseInfoForm.appId }}</span>
              </el-form-item>
              <el-form-item label="创建时间" style="width: 30%">
                <span>{{ baseInfoForm.createTime | parseTime }}</span>
              </el-form-item>
              <el-form-item label="最后登录时间" style="width: 30%">
                <span>{{ baseInfoForm.lastLoginTime | parseTime }}</span>
              </el-form-item>

              <el-form-item label="城市" style="width: 30%">
                <span>{{ baseInfoForm.city }}</span>
              </el-form-item>
              <el-form-item label="启用" style="width: 30%">
                <span>{{ baseInfoForm.enable ? "是" : "否" }}</span>
              </el-form-item>
              <el-form-item label="是否启用" style="width: 30%">
                <el-switch
                  v-model="baseInfoForm.enable"
                  @change="modifyEnable"
                ></el-switch>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="拼团订单" name="groupbuyOrderList">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column
                label="订单号"
                type="id"
                width="80"
                align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.id }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="微信订单号"
                type="outTradeNo"
                width="80"
                align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.outTradeNo }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="source" label="产品名称" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.productName }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="source" label="产品金额" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.money / 100 }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="source" label="收货人" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.name }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="source" label="联系电话" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.mobile }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="source" label="收货地址" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.address }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="状态" align="center">
                <template slot-scope="scope">
                  <span>
                    {{ statusFormat[scope.row.status] }}<br>
              <span v-if="scope.row.status == 'refund'"
                    style="color: red">奖金：￥{{ scope.row.reward | parseMoneyExcept }}</span>
                  </span>
                </template>
              </el-table-column>
              <!--<el-table-column prop="source" label="支付方式">-->
              <!--<template slot-scope="scope">-->
              <!--<span>{{ payTypeFormat[scope.row.payType] }}</span>-->
              <!--</template>-->
              <!--</el-table-column>-->
              <el-table-column label="创建时间" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.createTime | parseTime }}</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="nowPage"
                :page-size="limit"
                layout="total, prev, pager, next"
                :total="totalElement"
              ></el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="拼友" name="users">
            <el-table :data="userData" style="width: 100%">
              <el-table-column label="ID" prop="id" align="center"></el-table-column>
              <el-table-column label="openID" prop="openId" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.wxIds.length !== 0 ? scope.row.wxIds[0].openId : "--" }}</span>
                </template>
              </el-table-column>
              <el-table-column label="推荐人" align="center" width="100">
                <template slot-scope="scope">
                  <span v-if="scope.row.inviteUser">{{scope.row.inviteUser.name}}</span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="用户名" width="150" align="center"></el-table-column>
              <el-table-column prop="avatar" label="头像" align="center" width="80">
                <template slot-scope="scope">
                  <el-avatar :size="'large'" v-if="scope.row.avatar" :src="scope.row.avatar"></el-avatar>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="性别" align="center" width="80">
                <template slot-scope="scope">
                  <span>{{ gender[scope.row.gender] }}</span>
                </template>
              </el-table-column>
              <el-table-column label="注册时间" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="推广人数" align="center" width="100">
                <template slot-scope="scope">
            <span class="link-type" style="cursor: pointer;color: #409EFF"
                  @click="openInviter(scope.row)">{{ scope.row.inviteCount }}</span>
                </template>
              </el-table-column>
              <el-table-column label="拼团次数" align="center" width="100">
                <template slot-scope="scope">
                  <span class="link-type">{{ scope.row.groupCount }}</span>
                </template>
              </el-table-column>
              <el-table-column label="最后拼团时间" align="center" width="100">
                <template slot-scope="scope">
                  <span v-if="scope.row.lastGroupTime>0">{{ scope.row.lastGroupTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
                  <span v-else>未参与</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="userNowPage"
                :page-size="userLimit"
                layout="total, prev, pager, next"
                :total="userTotalElement"
              ></el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
  import {userData, userDetail, userEnable} from '@/api/user'
  import {groupbuyOrderList} from "@/api/order";
  import HhxApi from "@/api/";

  export default {
    name: "UserModify",
    data() {
      return {
        createUserTypeOptions: {
          manager: "管理员",
          teacher: "导师",
          user: "用户",
        },
        activeName: "baseInfo",
        tableData: [],
        payTypeFormat: {
          wxpay_online: "微信",
          alipay: "支付宝",
        },
        statusFormat: {
          cancel: "已取消",
          init: "待付款",
          paid: "待成团",
          grouped: "待发货",
          shipped: "待收货",
          finish: "已完成",
          refund: "已退款",
        },
        baseInfoForm: {
          avatar: "",
          formId: 0,
          name: "",
          mobile: "",
          password: "",
          gender: "male",
          enable: true,
          createTime: "",
          city: "",
          surplus: {
            gold: 0,
            money: 0,
          },
          inviteUserId: "",
          lastLoginTime: "",
        },
        limit: 10,
        nowPage: 1,
        totalElement: 0,
        operateTypesOptions: {},
        unionTypeOptions: {},
        paytypeOptions: {},
        wealthTypeOptions: {},
        flowStatusOptions: {},
        gender: {
          female: "女",
          male: "男",
        },
        userData: [],
        userLimit: 10,
        userNowPage: 1,
        userTotalElement: 0,
      };
    },
    watch: {
      activeName(val) {
        this.getData(val);
      },
      limit(val) {
        this.getData(this.activeName);
      },
      nowPage(val) {
        console.log("----", val);
        // this.getData(this.activeName);
      },
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.limit = val;
      },
      handleCurrentChange(val) {
        this.nowPage = val;
        this.getData(this.activeName);
      },
      getData(type = null) {
        this.tableData = [];
        this.totalElement = 0;
        switch (type) {
          case "groupbuyOrderList":
            groupbuyOrderList({
              limit: this.limit,
              page: this.nowPage - 1,
              userId: this.$route.query.id,
            }).then((res) => {
              if (res.code === 200) {
                this.tableData = res.data;
                this.totalElement = res.total;
                this.nowPage = res.page + 1;
              }
            });
            break;
          case "users":
            userData({
              limit: this.userLimit,
              page: this.userNowPage - 1,
              inviteUserId: this.$route.query.id,
              showAllTree: true
            }).then((res) => {
              if (res.code === 200) {
                this.userData = res.data;
                this.userTotalElement = res.total;
                this.userNowPage = res.page + 1;
              }
            });
            break;
          default:
            break;
        }
      },
      modifyEnable() {
        userEnable({
          targetId: this.baseInfoForm.formId,
          yes: this.baseInfoForm.enable ? true : false,
        })
          .then((res) => {
            if (res.code === 200) {
              this.$message.success("操作成功");
              this.getInfo();
            }
          });
      },
      getInfo() {
        userDetail({
          targetId: this.$route.query.id,
        })
          .then((res) => {
            if (res.code === 200) {
              this.baseInfoForm = {
                formId: res.data.id,
                avatar: res.data.wxIds[0].avatar,
                appId: res.data.wxIds[0].openId,
                name: res.data.name,
                mobile: res.data.mobile,
                password: res.data.password,
                gender: res.data.gender,
                enable: res.data.enable,
                surplus: res.data.surplus,
                createTime: res.data.createTime,
                city: res.data.city,
                inviteUserId: res.data.inviteUserId,
                lastLoginTime: res.data.lastLoginTime,
              };
            }
          });
      },
      checkInfo() {
        if (String(this.baseInfoForm.name).trim() == "") {
          this.$message({
            type: "error",
            message: "请填写名称",
          });
          return false;
        }
        if (String(this.baseInfoForm.password).trim() == "") {
          this.$message({
            type: "error",
            message: "请填写名称",
          });
          return false;
        }
        return true;
      },
      save() {
        if (!this.checkInfo()) {
          return;
        }
        HhxApi.userMana.userModify(this.baseInfoForm).then((res) => {
          if (res.code == 200) {
            this.$router.go(-1);
          }
        });
      },

    },
    mounted() {
      this.getInfo();
      // this.operateTypes();
      // this.getWealthTypes();
      // this.paytypes();
      // this.unionTypes();
      // if (this.$route.query.type == "edit")
      // }
    },
  };
</script>
<style>
  .UserModify .baseInfoBox {
    padding: 30px;
  }
</style>
<style scoped lang="scss">
  .UserModify {
    .modify-bot {
      width: 100%;
      padding: 10px;
    }

  }
</style>
